<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关键帧动画</title>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
    <link rel="stylesheet" href="common.css">
</head>

<body>

</body>
<script>
    //  创建场景对象Scene
    var scene = new THREE.Scene();

    // 创建几何体模型
    var geometry1 = new THREE.BoxGeometry(100, 100, 100);
    var geometry2 = new THREE.SphereGeometry(40, 25, 25);
    var material = new THREE.MeshPhongMaterial({
        color: 0x0000ff,
    })
    var mesh1 = new THREE.Mesh(geometry1, material);
    var mesh2 = new THREE.Mesh(geometry2, material);
    mesh2.position.x = 200
    scene.add(mesh1, mesh2)

    // 创建光
    var ambient = new THREE.AmbientLight(0xffffff, 0.1);
    var point = new THREE.PointLight(0xffffff); //设置点光源
    point.position.set(900, 200, 300); //点光源位置
    scene.add(ambient, point); //点光源添加到场

    // 创建相机
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var s = 400;
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);
    camera.lookAt(scene.position);
    var axisHelper = new THREE.AxisHelper(600); // 辅助坐标系
    scene.add(axisHelper);

    // 创建帧
    var scaleTrack = new THREE.KeyframeTrack('Sphere.scale', [0, 20], [1, 1, 1, 3, 3, 3]); //帧数据
    var clip = new THREE.AnimationClip("AnimationName", 20, [scaleTrack]) //创建帧动画
    var mixer = new THREE.AnimationMixer(mesh2) //选择播放对象
    AnimationAction = mixer.clipAction(clip); //将对象添加到帧动画中，生成动画
    AnimationAction.timeScale = 10 //播放速度(默认1)
    AnimationAction.play(); //播放动画
    var clock = new THREE.Clock(); //创建时钟对象

    // 成像
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);

    // 渲染
    function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
        mixer.update(clock.getDelta()); //更新混合器相关的时间
    }
    // 控制监听
    // var controls = new THREE.OrbitControls(camera, renderer.domElement)
    // controls.addEventListener('change', render, false)
    render()
</script>

</html>